<!-- home -->
<template>
    <div>
        <van-nav-bar title="网络直播课" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" />
        <div class="index-container">
            <div class="video-box">
                <video id="videoElement" width="100%" controls v-show="info.url"></video>
                <van-swipe class="my-swipe" indicator-color="#000">
                    <van-swipe-item v-if="!info.url">
                        <div class="msg-box">
                            <p class="msg-title">主播尚未上线 / 开始，敬请期待·~！</p>
                            <span class="msg-desc">开始时间；{{info.startTime}}</span>
                            <span class="msg-desc">结束时间；{{info.endTime}}</span>
                        </div>
                        <img :src="info.cover" class="img">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="title-box">
                <div class="title">{{info.name}}</div>
                <div class="edit-box">
                    <van-icon :name="isLike ? 'like':'like-o'" :color="isLike ? '#ff9235' : '#999'" @click="handleLike"></van-icon>
                    <van-icon :name="isSave ? 'star':'star-o'" :color="isSave ? '#ff9235' : '#999'" @click="handleSave"></van-icon>
                </div>
            </div>
            <div class="com-box">
                <div class="com-title">直播介绍</div>
                <div class="content">{{info.desc}}</div>
            </div>
            <div class="com-box">
                <div class="com-title">主播信息</div>
                <div class="course-box">
                    <div class="content">作者：{{info.user && info.user.username}}</div>
                    <div class="content">开始时间：{{info.startTime}}</div>
                    <div class="content">结束时间：{{info.endTime}}</div>
                    视频类型：<van-tag type="primary" size="large">{{info.category && info.category.name}}</van-tag>
                </div>
            </div>
            <div class="com-box">
                <div class="com-title">相关推荐</div>
                <div class="video-list-box">
                    <van-list
                            v-model="listVideo.loading"
                            :finished="listVideo.finished"
                            finished-text="没有更多了"
                            @load="fetchVideoList"
                    >
                        <div class="item-video-box" @click="goDetailsCourse(item)" v-for="item,index in listVideo.list" :key="index">
                            <div class="img-box">
                                <img :src="item.cover">
                                <template>
                                    <van-tag color="#ff3535">{{item.category.name}}</van-tag>
                                </template>
                            </div>
                            <div class="info-box">
                                <div class="title">{{item.name}}</div>
                                <div class="info">{{item.desc}}</div>
                                <div class="edit-box">{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</div>
                            </div>
                        </div>
                    </van-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { likeCourseById,saveCourseById,likeCourseAdd,likeCourseDel,saveCourseAdd,saveCourseDel } from '@/api/course.js'
  import { details, list} from '@/api/course.js'
  import { orderAll} from '@/api/order.js'
  import { courseDetailList } from '@/api/courseDetail.js'
  import { alipayTradePrecreate, alipayTradeWapPay, alipayTradeQuery } from '@/api/common.js'
  import api from '@/api'
  import flvjs from 'flv.js/dist/flv.min.js'
  import dayjs from 'dayjs'

  export default {
    data() {
      return {
        isBuyThisCourse: false,
        id:null,
        isLike: false,
        isSave: false,
        courseIndex:0,
        userId:null,
        courseOrderList:[],
        info:{},
        listVideo:{
          loading: false,
          finished: false,
          listQuery:{
            pageSize:20,
            pageNum:0,
          },
          list:[]
        },
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "http://localhost:10086/upload/video.mp4"
          }],
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          preload: 'auto',
          fluid: true,
          poster: "",
        }

      }
    },

    computed: {},

    mounted() {
      if (this.id) {
        this.getAboutCourse()
      }
    },
    created() {
      this.userId = this.$store.getters.userId
      this.id = Number(this.$route.query.liveCourseId)
    },

    methods: {
      getAboutCourse() {
        this.fetchDetails()
        this.likeCourseById()
        this.saveCourseById()
      },
      setPlayer() {
        if (flvjs.isSupported() && this.info.url) {
          var videoElement = document.getElementById('videoElement')
          var flvPlayer = flvjs.createPlayer({
            /*          type: getFileSuffix(row.fileName),
                      url: this.getCurrectUrl(row.issueUrl.substr(1))*/
            type: 'flv',
            // url: 'http://localhost:8000/live/hello.flv'
            url: this.info.url
          })
          flvPlayer.attachMediaElement(videoElement)
          flvPlayer.load()
          flvPlayer.play()
        }
      },
      async fetchVideoList() {
        this.listVideo.listQuery.pageNum ++
        await api.liveCourse.list({...this.listVideo.listQuery, pageSize: 3}).then(res => {
          if (res.code == 200) {
            this.listVideo.list = this.listVideo.list.concat(res.data.rows)
            this.listVideo.loading= false
            if(res.data.count > this.listVideo.list.length){
              this.listVideo.finished = false
            }else{
              this.listVideo.finished = true
            }
          } else {
            this.$notify(res.message)
          }
        })
      },
      async fetchDetails(){
        await api.liveCourse.findById({id:this.id}).then(res => {
          if (res.code == 200) {
            this.info= res.data
            this.info.startTime = dayjs(res.data.startTime).format('YYYY-MM-DD HH:mm:ss')
            this.info.endTime = dayjs(res.data.endTime).format('YYYY-MM-DD HH:mm:ss')
            this.playerOptions.poster = res.data.cover
            this.setPlayer()
          } else {
            this.$notify(res.message)
          }
        })
      },
      changeTag(item, index){
        this.courseIndex = index
        this.playerOptions.sources = [{
          type: "video/mp4",
          src: item.url
        }];
      },
      goDetailsCourse(item){
        this.$router.push('/liveVideoDetails?liveCourseId=' + item.id);
        this.id = item.id;
        this.getAboutCourse()
      },
      async likeCourseById() {
        await likeCourseById({ liveCourseId: this.id },this.isCourse).then(res => {
          if (res.code == 200) {
            this.countLike = res.data.length
            res.data.forEach((item,index) => {
              if(item.userId == this.userId){
                this.isLike = true
                this.likeId = item.id
              }
            });
            let likeList = res.data.filter(dd => dd.userId == this.userId)
            if (likeList.length === 0) {
              this.isLike = false;
            }

          } else {
            this.$notify(res.message)
          }
        })
      },
      async like() {
        await likeCourseAdd({
          liveCourseId: this.id ,
          userId:this.userId},this.isCourse
        ).then(res => {
          if (res.code == 200) {
            this.likeCourseById()
          } else {
            this.$notify(res.message)
          }
        })
      },
      async unlike() {
        await likeCourseDel({
          id: this.likeId },this.isCourse
        ).then(res => {
          if (res.code == 200) {
            this.likeCourseById()
          } else {
            this.$notify(res.message)
          }
        })
      },
      async saveCourseById() {
        await saveCourseById({ liveCourseId: this.id},this.isCourse).then(res => {
          if (res.code == 200) {
            this.countSave = res.data.length
            res.data.forEach((item,index) => {
              if(item.userId == this.userId){
                this.isSave = true
                this.saveId = item.id
              }
            });
            let saveList = res.data.filter(dd => dd.userId == this.userId)
            if (saveList.length === 0) {
              this.isSave = false;
            }
          } else {
            this.$notify(res.message)
          }
        })
      },
      async saveCourseAdd() {
        await saveCourseAdd({
          liveCourseId: this.id ,
          userId:this.userId},this.isCourse
        ).then(res => {
          if (res.code == 200) {
            this.saveCourseById()
          } else {
            this.$notify(res.message)
          }
        })
      },
      async saveCourseDel() {
        await saveCourseDel({
          id: this.saveId},this.isCourse
        ).then(res => {
          if (res.code == 200) {
            this.saveCourseById()
          } else {
            this.$notify(res.message)
          }
        })
      },
      handleSave() {
        if(this.isSave){
          this.saveCourseDel()
        }else{
          this.saveCourseAdd()
        }
        this.isSave = !this.isSave
      },
      handleLike() {
        if(this.isLike){
          this.unlike()
        }else{
          this.like()
        }

        this.isLike = !this.isLike
      },
    }
  }
</script>
<style lang="scss" scoped>
    .index-container {
        box-sizing: border-box;
        width: 100%;
        min-height: 100vh;
        .my-swipe{
            background: #fff;
            .van-swipe-item {
                height: 5rem;
                text-align: center;
                .msg-box {
                    position: absolute;
                    top: 35px;
                    left: 35px;
                    color: orangered;
                    /*text-align: left;*/
                    z-index: 999;
                    .msg-title {
                        font-size: 18px;
                        font-weight: bold;
                    }
                    .msg-desc {
                        font-size: 16px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                }
                .img{
                    height: 100%;
                    width: 100%;
                    opacity: 0.7;
                }
            }
        }
        .com-box{
            background: #fff;
            padding:.4167rem .4444rem ;
            box-sizing: border-box;
            margin-top: .1389rem;
            .course-box{
                .van-tag{
                    margin:.1389rem;
                }
            }
            .com-title{
                font-size: .3889rem;
                font-weight: bold;
                margin-bottom: .2778rem;
                border-left: .1rem solid #ff9235;
                padding-left: .2778rem;
                height: .3rem;
                line-height: .3rem;
            }
            .content{
                font-size: .3333rem;
                line-height: .5556rem;
                word-break: break-all;
                color: #333;
            }
        }
        .title-box{
            background: #fff;
            padding:.4167rem 1rem .4444rem .4167rem;
            box-sizing: border-box;
            position: relative;
            width: 100%;
            line-height: .7rem;
            .title{
                font-size: .4722rem;
                font-weight: bold;
            }
            .edit-box{
                position: absolute;
                top: .4167rem;
                bottom: .4167rem;
                right: .18rem;
                font-size: .46rem;
                padding:0 0 0 .2778rem;
                display: flex;
                .van-icon{
                    color: #666;
                    display: block;
                    padding: 0;
                    margin:0 10px .4rem 0 ;
                    &::before{
                        margin-right: .1389rem;
                        font-weight: bold;
                        color: #ff9235;
                    }
                }
            }
        }
        .video-box{
            width: 100%;
            .video-player-box{
                width: 100%;
                position: relative;
                /deep/ .video-js{
                    width: 100% !important;
                    // height: 5.rem;
                }
                /deep/ .vjs-big-play-button{
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #ff9235;
                }
            }
        }
        .video-list-box{
            margin-top: .45rem;
        }
        .item-video-box{
            background: #fff;
            border-radius: .2778rem;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            width: 100%;
            margin:.2778rem auto 0;
            .img-box{
                flex: 0 0 3rem;
                position: relative;
                img{
                    width:100%;
                    height: 2.2rem;
                    border-radius: .1389rem;
                }
                .van-tag{
                    position: absolute;
                    top: .1389rem;
                    left: .1389rem;
                }
            }
            .info-box{
                flex:1;
                padding: .1389rem .1389rem .1389rem .2778rem;
                box-sizing: border-box;
                height: 2.2rem;
                position: relative;
                .title{
                    width:5.5rem;
                    font-size: .4167rem;
                    color: #000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .info{
                    font-size: .3333rem;
                    color: #999;
                    margin-top: .2rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .edit-box{
                    position: absolute;
                    left: .2778rem;
                    bottom: .0556rem;
                    font-size: .3333rem;
                    width: 100%;
                    .van-icon{
                        min-width: 1.7rem;
                        color: #666;
                        display: inline-block;
                        &::before{
                            margin-right: .1389rem;
                            font-size: .3333rem;
                            font-weight: bold;
                            color: #ff9235;
                        }
                    }
                }
            }
        }
    }
</style>
